<template>
  <el-container>
    <div>
      <el-header>
        <el-menu class="el-menu-demo" mode="horizontal">
          <el-menu-item index="1">项目</el-menu-item>
          <el-menu-item index="2">数据集</el-menu-item>
          <el-menu-item index="3">课程</el-menu-item>
          <el-menu-item index="4">比赛</el-menu-item>
          <el-menu-item index="5">认证</el-menu-item>
          <el-submenu index="6">
            <template slot="title">更多</template>
            <el-menu-item index="6-1">选项1</el-menu-item>
            <el-menu-item index="6-2">选项2</el-menu-item>
            <el-menu-item index="6-3">选项3</el-menu-item>
          </el-submenu>
          <el-menu-item index="7" style="float: right"
            ><el-row>
              <el-button type="primary" v-show="this.user == null"
                >登录</el-button
              >
              <!-- 头像 -->
              <div>
                <el-avatar
                  v-show="this.user != null"
                  :src="userFace"
                ></el-avatar>
                {{ nickname }}
              </div>
            </el-row></el-menu-item
          >
        </el-menu>
      </el-header>
    </div>

    <div style="height: 100%; width: 80%; margin: 0 auto">
      <div>
        <div class="demo-type" style="float: left; margin-right: 20px">
          <div>
            <el-avatar :src="user.userFace"></el-avatar>
          </div>
        </div>

        <!-- 个人信息 -->
        <el-descriptions class="margin-top" title="个人信息" :column="3" border>
          <template slot="extra">
            <el-button type="danger" @click="LogOut" size="small"
              >退出登录</el-button
            >
            <el-button type="primary" @click="BackToIndex">回到首页</el-button>
          </template>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              用户名
            </template>
            {{ user.nickname }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              手机号
            </template>
            {{ user.phone }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-s-custom"></i>
              身份
            </template>
            {{ user.identityType }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-message"></i>
              邮箱地址:
            </template>
            {{ user.email }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-location"></i>
              地址
            </template>
            {{ user.address + ' ' + user.school }}
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <div class="left">
        <el-container style="height: 500px; border: 1px solid #eee">
          <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
            <el-menu :default-openeds="['1', '3']">
              <el-submenu index="1">
                <template slot="title"
                  ><i class="el-icon-message"></i>我的主页</template
                >
              </el-submenu>
              <el-submenu index="2">
                <template slot="title"
                  ><i class="el-icon-menu"></i>项目</template
                >
                <el-menu-item-group>
                  <el-menu-item index="2-1">喜欢Fork的项目</el-menu-item>
                  <el-menu-item index="2-2">喜欢的项目</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
            </el-menu>
          </el-aside>

          <el-container>
            <el-main>
              <el-form :inline="true" class="demo-form-inline">
                <el-form-item label="所有权限">
                  <el-select placeholder="所有权限">
                    <el-option label="私有" value="prvite"></el-option>
                    <el-option label="公开" value="public"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="所有类型">
                  <el-select placeholder="所有类型">
                    <el-option label="NoteBook" value="notebook"></el-option>
                    <el-option label="脚本任务" value="jben"></el-option>
                    <el-option label="图形化" value="tx"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="排序">
                  <el-select placeholder="运行时间排序">
                    <el-option label="运行时间排序" value="run"></el-option>
                    <el-option label="创建时间排序" value="cj"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="showAddProjectView"
                    >立即创建</el-button
                  >
                </el-form-item>
              </el-form>
              <!-- 个人项目展示表格 -->
              <el-table :data="projects" style="width: 100%">
                <el-table-column label="实验标题" width="400">
                  <template slot-scope="scope">
                    <div @click="open1(scope.row)">
                      {{ scope.row.title }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="实验描述" width="180" align="left">
                  <template slot-scope="scope">
                    <div @click="open2(scope.row)">
                      {{ scope.row.projectAbs.slice(0, 12) }}.....
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="projectType"
                  width="100"
                  label="项目难度分级"
                >
                </el-table-column>
                <el-table-column label="领域和方法" width="180">
                  <template slot-scope="scope">
                    {{ scope.row.projectArea + ' ' + scope.row.projectMethod }}
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="300">
                  <template slot-scope="scope">
                    <div>
                      <el-button type="primary" @click="toExpView(scope.row)"
                        >去看看</el-button
                      >
                      <el-button type="danger" @click="deleteProject(scope.row)"
                        >删除</el-button
                      >
                      <el-upload
                        v-show="scope.row.content != '未添加'"
                        :action="
                          '/experiment/addContent?projectId=' + scope.row.id
                        "
                        :on-success="onSuccess"
                        :show-file-list="false"
                      >
                        <el-button type="warning">更新</el-button>
                      </el-upload>
                      <!-- 上传内容 -->
                      <el-upload
                        v-show="scope.row.content == '未添加'"
                        :action="
                          '/experiment/addContent?projectId=' + scope.row.id
                        "
                        :on-success="onSuccess"
                        :show-file-list="false"
                      >
                        <el-popover
                          style="margin-left: 8px"
                          placement="top-start"
                          title="提示"
                          trigger="hover"
                          content="该项目还未添加内容,点击添加内容"
                        >
                          <el-button slot="reference" type="success"
                            >添加内容</el-button
                          >
                        </el-popover>
                      </el-upload>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </el-main>
          </el-container>
        </el-container>
      </div>
    </div>
    <el-footer>
      <div class="div_allinline">
        <div class="subdiv_allinline" style="width: 300px">关于AI Studio</div>
        <div class="subdiv_allinline">相关资源</div>
        <div class="subdiv_allinline">教育专区</div>
        <div class="subdiv_allinline">联系我们</div>
      </div>
    </el-footer>
    <!-- 添加项目表单 -->
    <el-dialog title="添加项目" :visible.sync="dialogFormVisible">
      <el-form
        ref="projectForm"
        label-width="100px"
        :model="project"
        :rules="rules"
      >
        <el-form-item label="项目标题：" prop="title">
          <el-input
            style="width: 500px"
            prefix-icon="el-icon-edit"
            v-model="project.title"
            placeholder="请输入项目标题..."
          ></el-input>
        </el-form-item>
        <el-form-item label="项目描述：" prop="projectAbs">
          <el-input
            type="textarea"
            style="width: 350px"
            prefix-icon="el-icon-edit"
            v-model="project.projectAbs"
            placeholder="请输入描述项目..."
          ></el-input>
        </el-form-item>
        <el-form-item label="难度类型：" prop="projectType">
          <el-select v-model="project.projectType" placeholder="请选择难度类型">
            <el-option
              v-for="item in projectTypes"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="研究领域：" prop="projectArea">
          <el-select
            v-model="project.projectArea"
            placeholder="请选择项目研究领域..."
          >
            <el-option
              v-for="item in projectAreas"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="研究方法：" prop="projectMethod">
          <el-select
            v-model="project.projectMethod"
            placeholder="请选择项目研究方法..."
          >
            <el-option
              v-for="item in projectMethods"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelAddProject">取 消</el-button>
        <el-button type="primary" @click="addProject">提 交</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
export default {
  name: 'PersonView',
  data() {
    return {
      user: JSON.parse(window.sessionStorage.getItem('user')),
      userFace:
        'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
      nickname: '',
      dialogFormVisible: false,
      // 添加项目时验证表单的类
      project: {
        id: null,
        title: '', //标题
        projectAbs: '', //项目描述
        projectType: '', //项目类型
        projectArea: '', //项目研究领域
        projectMethod: '', //项目研究方法
        userid: null,
      },
      // 表单验证规则
      rules: {
        title: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
        projectAbs: [
          { required: true, message: '项目描述不能为空', trigger: 'blur' },
        ],
        projectType: [
          { required: true, message: '项目类型不能为空', trigger: 'blur' },
        ],
        projectArea: [
          { required: true, message: '项目研究领域不能为空', trigger: 'blur' },
        ],
        projectMethod: [
          { required: true, message: '项目研究方法不能为空', trigger: 'blur' },
        ],
      },
      projectTypes: [
        {
          id: '1',
          value: '入门类',
          label: '入门类',
        },
        {
          id: '2',
          value: '进阶类',
          label: '进阶类',
        },
        {
          id: '3',
          value: '高级类',
          label: '高级类',
        },
      ],
      projectAreas: [
        {
          id: '1',
          value: '计算机视觉',
          label: '计算机视觉',
        },
        {
          id: '2',
          value: '自然语言处理',
          label: '自然语言处理',
        },
        {
          id: '3',
          value: '语音识别',
          label: '语音识别',
        },
        {
          id: '4',
          value: '推荐算法',
          label: '推荐算法',
        },
        {
          id: '5',
          value: '知识图谱',
          label: '知识图谱',
        },
        {
          id: '6',
          value: '强化学习',
          label: '强化学习',
        },
      ],
      projectMethods: [
        {
          id: '1',
          value: '机器学习',
          label: '机器学习1',
        },
        {
          id: '2',
          value: '深度学习',
          label: '深度学习1',
        },
      ],
      projects: [], //表格中显示项目的数据源
    }
  },
  methods: {
    initUser() {
      if (this.user != null) {
        console.log('我进入了赋值区域')
        this.userFace = this.user.userFace
        this.nickname = this.user.nickname
      }
    },
    initUserProject() {
      this.getRequest('/experiment/getExp/' + this.user.id).then((resp) => {
        if (resp) {
          this.projects = resp
          console.log(resp)
        }
      })
    },
    showAddProjectView() {
      this.dialogFormVisible = true
      this.project = {
        id: null,
        title: '', //标题
        projectAbs: '', //项目描述
        projectType: '', //项目类型
        projectArea: '', //项目研究领域
        projectMethod: '', //项目研究方法
        userid: null,
      }
    },
    cancelAddProject() {
      this.dialogFormVisible = false
      this.project = {
        id: null,
        title: '', //标题
        projectAbs: '', //项目描述
        projectType: '', //项目类型
        projectArea: '', //项目研究领域
        projectMethod: '', //项目研究方法
        userid: null,
      }
    },
    addProject() {
      this.project.userid = this.user.id
      this.$refs['projectForm'].validate((valid) => {
        if (valid) {
          this.postRequest('/experiment/', this.project).then((resp) => {
            if (resp) {
              this.dialogFormVisible = false
              this.initUserProject()
            }
          })
        }
      })
    },
    open1(data) {
      this.$notify({
        title: '项目名称',
        message: data.title,
        position: 'top-left',
      })
    },
    open2(data) {
      this.$notify({
        title: '项目简介',
        message: data.projectAbs,
        position: 'top-left',
      })
    },
    toExpView(data) {
      this.$router.push({ path: '/expview', query: { expId: data.id } })
    },
    LogOut() {
      this.$confirm('此操作将注销登录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          // 注销登录
          this.getRequest('/user/logout').then((resp) => {
            if (resp) {
              if (resp.code == 200) {
                // 销毁用户的session
                window.sessionStorage.removeItem('user')
                this.$router.push({ path: '/' })
              }
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作',
          })
        })
    },
    BackToIndex() {
      this.$router.push({ path: '/mainload' })
    },
    onSuccess() {
      this.initUserProject()
    },
    deleteProject(data) {
      this.$confirm(
        '此操作将永久删除该项目, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(() => {
          this.deleteRequest('/experiment/del/' + data.id).then((resp) => {
            if (resp) {
              this.initUserProject()
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
  },
  created() {
    this.initUser()
    this.initUserProject()
  },
}
</script>


<style>
.el-header {
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}

.left {
  margin-top: 50px;
  margin-right: 150px;
}

.el-header,
.el-footer {
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  color: #333;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>


